<template>
	<el-container>
		<el-main class="nopadding">
			<el-row :gutter="20" style="margin: 20px;">
				<el-col :span="8"><div style="font-weight: 600;font-size: 18px">项目经理:{{proInfo.title}}</div></el-col>
				<el-col :span="8"><div style="text-align: center;font-weight: 600;font-size: 18px">{{proInfo.title}}</div></el-col>
				<el-col :span="8"><div style="text-align: right;">开始日期：{{proInfo.beginTime}} 结束日期：{{proInfo.endTime}}
					<el-button type="success">清除</el-button>
					<el-button type="primary">刷新</el-button>
				</div></el-col>
			</el-row>
			<component :is="gc" class="left-container" :tasks="tasks" :readOnly="false" :proId="proId"/>
		</el-main>
	</el-container>
</template>

<script>
import GanttComponent from './ganttView';
export default {
	name: 'ProjectBreak Down',
	components: {GanttComponent},
	data () {
		return {
			proId: this.$route.query.proId,
			gc:"",
			proInfo:{},
			tasks: {
				data: [],
				links: []
			},
		}
	},
	mounted() {
		this.getProTaskInfo();
		this.gc = "GanttComponent";
	},
	methods:{
		async getProTaskInfo(){
			var res = await this.$API.project.proTask.getProTaskInfo.get({proId:this.proId});
			if (res.code == 200) {
				this.proInfo = res.data.proRecord;
				let taskInfo={
					data:res.data.data,
					links:res.data.links
				}
				this.tasks=taskInfo
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
	}
}
</script>

<style>
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.container {
	height: 100vh;
	width: 100%;
}
.left-container {
	overflow: hidden;
	position: relative;
	height: 100%;
}
</style>
